<ol data-bind="foreach: { data: styleRules, as: 'rule' }" class="code clearfix">
    <li>
        <span data-bind="text: rule.selector(), click: onShowSelectorInput, visible: !rule.showSelectorInput()" class="text selector start-tag"></span>
        <input data-bind="value: rule.selector, visible: rule.showSelectorInput, hasFocus: rule.showSelectorInput, event: { blur: selectorInputBlur }" type="text" class="text selector start-tag highlight">
        <span class="separator">{</span>
        <ul data-bind="foreach: { data: rule.declarations, as:'dec' }" class="css-property-list clearfix">
            <li class="css-property-group" data-bind="css: { 'style-item-editing': dec.showDecValue }, event: { mouseover: dec.enableChangeBtns, mouseout: dec.disableChangesBtns }">
                <span data-bind="text: dec.name(), click: dec.onShowDecName, visible: !dec.showDecName()" class="text attribute"></span>
                <input type="text" data-bind="value: dec.name, typeahead: $component._propertyName, items: 6, defaultShow: false, visible: dec.showDecName, hasFocus: dec.showDecName, event: { blur: dec.decNameInputBlur, keyup: dec.switchToValueInput }, attr: { placeholder: Kooboo.text.component.styleEditor.declaration }"
                    class="text attribute highlight input-small">
                <span class="separator">:</span>
                <span data-bind="text: dec.valueString() + ';', click: dec.onShowDecValue, visible: !dec.showDecValue(), css: { 'empty': dec.emptyValue }" class="text value"></span>
                <input type="text" data-bind="value: dec.valueString, visible: dec.showDecValue, hasFocus: dec.showDecValue, event: { blur: dec.decValueInputBlur, keyup: handleValueInputKeyPress }, attr: { placeholder: Kooboo.text.component.styleEditor.value }" class="text value highlight input-small">
                <span data-bind="visible: dec.showDecValue" class="separator">;</span>
                <!-- ko if: dec.ableToShowChangeImgBtn() && !dec.showDecValue() -->
                <a data-bind="click: dec.onPickImageBtnClick, text: Kooboo.text.component.styleEditor.pickImage" class="btn btn-xs blue pull-right"></a>
                <!-- /ko -->
                <!-- ko if: dec.ableToShowColorPicker -->
                <input data-bind="spectrum: dec.valueString" type="text" class="pull-left" style="display:none;">
                <!-- /ko -->
            </li>
        </ul>
        <a data-bind="click: $parent.addDeclaration.bind(rule), attr: { title: Kooboo.text.component.styleEditor.addProperty }" class="action add-css-property editable" href="javascript:;"><i class="fa fa-plus-square"></i></a>
        <span class="separator">}</span>
        <!-- ko if: $parent.showRelationBtn -->
        <a data-bind="click: rule.removeSelector, attr: { title: Kooboo.text.component.styleEditor.removeSelector }" href="javascript:;" class="action remove-selector"><i class="fa fa-minus-square icon-color-red"></i></a>
        <a data-bind="click: $parent.showRelation.bind(rule, rule.id), text: Kooboo.text.component.styleEditor.showRelation" href="javascript:;" class="label label-info"></a>
        <!-- /ko -->
    </li>
</ol>